<template>
	<div>
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>文章列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-card class="box-card">
			<el-button type="primary" size="mini" @click="add()">添加</el-button>
			
			 <el-input
			    placeholder="请输入内容"
				clearable
			    v-model="param.key">
			  </el-input>
			  <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
			
			    <el-table border
			      :data="tableData"
			      style="width: 100%">
			      <el-table-column
			        prop="create_time"
			        label="日期"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="title"
			        label="标题"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="sort"
			        label="排序">
			      </el-table-column>
				  <el-table-column label="排序">
					  <template slot-scope="scope">
						  <!-- {{scope.row}} -->
						  <el-button type="primary" size="mini" @click="edit(scope.row)" :visible.sync="editDialogVisible">编辑</el-button>
						  <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
					  </template>
				  </el-table-column>
			    </el-table>
		</el-card>
		<!-- 分页 -->
		<el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage"
		      :page-sizes="[4, 200, 300, 400]"
		      :page-size="100"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		
		<!-- 添加表单 -->
		<el-dialog
		
		  title="添加"
		  :visible.sync="addDialogVisible"
		  width="30%"
		  >
		  <!-- <span>这是一段信息</span> -->
		  <el-form ref="form" :model="addform" label-width="80px">
		    <el-form-item label="标题">
		      <el-input v-model="addform.title" placeholder="标题"></el-input>
		    </el-form-item>
			<el-form-item label="排序">
			  <el-input v-model="addform.sort" placeholder="排序"></el-input>
			</el-form-item>
			<el-form-item label="排序">
			<el-radio v-model="addform.status" label="1">启用</el-radio>
			  <el-radio v-model="addform.status" label="2">禁用</el-radio>
			</el-form-item>
		    <el-form-item label="内容">
		      <el-input type="textarea" v-model="addform.content" placeholder="内容"></el-input>
		    </el-form-item>
		    
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addSave()">确 定</el-button>
		  </span>
		</el-dialog>
	
		<!-- 编辑表单 -->
		<el-dialog
		
		  title="添加"
		  :visible.sync="editDialogVisible"
		  width="30%"
		  >
		  <!-- <span>这是一段信息</span> -->
		  <el-form ref="form" :model="editform" label-width="80px">
		    <el-form-item label="标题">
		      <el-input v-model="editform.title" placeholder="标题"></el-input>
		    </el-form-item>
			<el-form-item label="排序">
			  <el-input v-model="editform.sort" placeholder="排序"></el-input>
			</el-form-item>
			<el-form-item label="排序">
			<el-radio v-model="editform.status" label="1">启用</el-radio>
			  <el-radio v-model="editform.status" label="2">禁用</el-radio>
			</el-form-item>
		    <el-form-item label="内容">
		      <el-input type="textarea" v-model="editform.content" placeholder="内容"></el-input>
		    </el-form-item>
		    
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editSave()">确 定</el-button>
		  </span>
		</el-dialog>
			
	</div>
</template>

<script>
	export default{
		data() {
			 return {
					param : {
						key:'',
						page:1,
						limit:4
					},
			          tableData: [],
					  currentPage:1,
					  total:0,
					  addDialogVisible:false,
					  addform:{
						  title:'',
						  content:'',
						  sort:'',
						  status: '1',
					  },
					  editDialogVisible:false,
					  editform:{
						id :'',
						title:'',
					  	content:'',
					  	sort:'',
					  	status: '1',
					  }
			        }
		},
		created() {
			this.getList()
		},
		methods:{
			add(){
				// console.log(111)
				this.addDialogVisible = true
			},
			async addSave(){
				this.addDialogVisible = false
				const{data:res} = await this.$ajax.post('http://api.io/api/Article/save',this.addform)
				console.log(res)
				if(res.code==1){
					this.$msg.success(res.msg)
					this.getList()
				}else{
					this.$msg.error(res.msg)
				}
				this.addform.title = ''
				this.addform.sort = ''
				this.addform.content = ''
				
			},
			
			edit(info){
				console.log(info)
				this.editDialogVisible = true
				this.editform.id = info.id
				this.editform.title = info.title
				this.editform.sort = info.sort
				this.editform.status = info.status
				this.editform.content = info.content
			},
			async editSave(){
				this.editDialogVisible = false
				const{data:res} = await this.$ajax.post('http://api.io/api/Article/save',this.editform)
				console.log(res)
				if(res.code==1){
					this.$msg.success(res.msg)
					this.getList()
				}else{
					this.$msg.error(res.msg)
				}
				this.editform.id = ''
				this.editform.title = ''
				this.editform.sort = ''
				this.editform.status = ''
				this.editform.content = ''
				
			},
			
			handleSizeChange(val){
				// console.log(val)
				this.param.limit = val
				this.getList()
			},
			handleCurrentChange(val){
				// console.log(val)
				this.param.page = val
				this.getList()
			},
			search(){
				this.getList()
			},
			
			async getList(){
				 const{data:res} = await this.$ajax.get('http://api.io/api/Article/index',{params:this.param})
				 this.tableData = res.data
				 this.total = res.total
				// console.log(res)
			},
		
		async del(id){
			const{data:res} = await this.$ajax.get('http://api.io/api/Article/delete',{params:{id:id}})
			if(res.code==1){
				this.$msg.success(res.msg)
				this.getList()
			}else{
				this.$msg.error(res.msg)
			}
			console.log(res)
		}
		
		},
		
	}
</script>

<style>
</style>
